<script lang="ts">
import {CommonPropsMixin} from "@/views/dashboard/CommonPropsMixin";
import DialogAndBlock from "@/components/DialogAndBlock/index.vue";
import RenderVnodes from "@/components/RenderVnodes3/index.vue";
import {defineAsyncComponent, h, markRaw, toRaw} from 'vue'
import {imgTypeOptions} from "@/config/options";
import {PathUtils} from "@/utils/PathUtils";
import {OtherCode} from "@/views/dashboard/OtherCode";

const glob = import.meta.glob('./OpenFileCom/*.vue');
const Coms={}
Object.keys(glob).forEach(key=>{
  Coms[key.replace('./OpenFileCom/','').replace('.vue','')]=defineAsyncComponent(glob[key])
})
export default {
  components: {
    DialogAndBlock,
    RenderVnodes
  },
  mixins: [CommonPropsMixin],
  data() {
    return {
      show: false,
      comloadAgain: true,
      showCom: undefined,
      baseTitle: document.title
    }
  },
  watch: {
    openFile: {
      handler(val) {
        if(val) {
          document.title = PathUtils.resolve(this.baseFilePath,val)
          this.getShowCom()
        }
      },
      immediate: true,
    },
  },
  methods: {
    open() {
      if(!this.openFile) {
        return
      }
      this.show=true
      this.$refs.DialogRef.open()
    },
    close() {
      this.$refs.DialogRef.close()
    },
    closed() {
      document.title = this.baseTitle
      this.show=false
      this.$emit('closed')
    },
    getShowCom() {
      const fileNameSplit = this.openFile.split('.');
      const fileType=fileNameSplit[fileNameSplit.length - 1]
      let com = ''
      let lowType = fileType.toLowerCase()
      if(import.meta.env.VITE_ACE_CODE_TYPE.includes(lowType) || OtherCode.includes(lowType)) {
        com='CODECOM'
      }
      // 这里去处理显示用的组件，组件写在OpenFileCom文件夹下面
      if(imgTypeOptions.includes('.'+lowType)) {
        com = 'IMGCOM'
      }
      if(!com) {
        com = fileType.toUpperCase()+"COM"
      }
      let component = Coms[com]
      if(!component) {
        const filePlugins = window.__pagePlugin__.plugins.filter(i=>i.type==='file')
        for (let filePlugin of filePlugins) {
          const value = filePlugin.handler(window.__pagePlugin__,fileType)
          if(value) {
            component = value
            break;
          }
        }
      }
      if(this.showCom !== component) {
        this.comloadAgain = false
        this.$nextTick(()=>{
          this.comloadAgain=true
        })
      }
      if(!component) {
        this.showCom = null
        return
      }
      this.showCom = markRaw(component)
    },
    getFileComRenderVnodes() {
      if(!this.showCom) {
        return [h('div',{
          class:'CommomComClass'
        },['没有可用组件'])]
      }
      const vnode = h(this.showCom,{
        openFile: this.openFile,
        fileList: this.fileList,
        baseFilePath: this.baseFilePath,
        ref: 'showComponent',
        class:'CommomComClass',
        onRefreshFileList: this.refreshFileList
      })
      return [vnode]
    },
    lastBtnClick() {
      if(this.$refs.showComponent.lastBtnClick) {
        this.$refs.showComponent.lastBtnClick()
      } else {
        let findIndex = this.fileList.findIndex(i=>i.fileName === this.openFile)
        findIndex--
        if(findIndex<0) {
          findIndex = this.fileList.length - 1
        }
        this.openFileSetRoute(this.fileList[findIndex].fileName)
      }
    },
    nextBtnClick() {
      if(this.$refs.showComponent.nextBtnClick) {
        this.$refs.showComponent.nextBtnClick()
      } else {
        let findIndex = this.fileList.findIndex(i=>i.fileName === this.openFile)
        findIndex++
        if(findIndex>=this.fileList.length) {
          findIndex = 0
        }
        this.openFileSetRoute(this.fileList[findIndex].fileName)
      }
    }
  }
}
</script>

<template>
  <DialogAndBlock
    :title="openFile"
    ref="DialogRef"
    @closed="closed"
    align-center
    content-overflow="unset"
  >
    <div class="fileContent" v-if="show">
      <RenderVnodes
        v-if="comloadAgain && openFile"
        :vnodes="getFileComRenderVnodes()"
      ></RenderVnodes>
      <div class="lastBtnPos" @click.stop>
        <el-button
          type="primary"
          icon="ArrowLeft"
          circle
          @click="lastBtnClick"
        ></el-button>
      </div>
      <div class="nextBtnPos" @click.stop>
        <el-button
          type="primary"
          icon="ArrowRight"
          circle
          @click="nextBtnClick"
        ></el-button>
      </div>
    </div>
  </DialogAndBlock>
</template>

<style scoped lang="scss">
.fileContent{
  height: 70vh;
  position: relative;
  .CommomComClass{
    padding-right: 36px !important;
    padding-left: 36px !important;
  }
  .lastBtnPos{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .nextBtnPos{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}
</style>
